<template>
	<view>
		


		<view>

						<!--
			<view class="uni-title uni-common-pl">普通选择器</view>
			<view class="uni-title uni-common-pl"></view>
						--> 
			<view class="uni-title uni-common-pl big-font" style="text-align: center;" >与当前时间相差</view>
			<view class="uni-title uni-common-pl big-font" style="text-align: center;" >{{msg}} </view>
			<view class="uni-list"> 
				<view class="uni-list-cell">
					<view class="uni-list-cell-left" style="font-size:38rpx;">
						预约时间
					</view>
					<view class="uni-list-cell-db" style="text-align: right;">
						
						<uni-data-select
						    v-model="hourVal"
						    :localdata="hourArray"
						    @change="change"
										  :clear="false"
						  ></uni-data-select>
					</view>
					
					<view class="uni-list-cell-db" style="text-align: left;">
						<uni-data-select
						    v-model="minVal"
						    :localdata="minArray"
						    @change="change"
										  :clear="false"
						  ></uni-data-select>
					</view>
				</view>
			</view>
			
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const hourArray= []
			const minArray=[]
			for (var i = 0; i < 24; i++) {
				hourArray.push({value:i,text:(i)+'点'})
			}
			var hourVal=uni.getStorageSync('hour')
			if(!hourVal){
				hourVal=4
			}
			var minVal=uni.getStorageSync('min')
			if(!minVal){
				minVal=30
			}
			for (var i = 0; i < 60; i=i+10) {
				var tmp=(i<10?'0'+i:i)
				minArray.push({value:i,text:tmp+'分'})
			}
			const msg='xxx小时xxx分'//+Date.now().getTime();//: 'xxx小时xxx分'
			return {
				time: '04:30',
				hourVal,
				hourArray,
				minVal,
				minArray,
				  
				msg,
				timer: null,
			}
		},
		onLoad() {
			
			// 设置一个每隔2000毫秒就执行的定时器
			this.timer = setInterval(()=>{
				this.formatToMsg()
			}, 500);
		},
		onUnload() {
			// 取消定时器
			//clearTimeout(this.timer); // 取消setTimeout定时器
			clearInterval(this.timer); // 取消setInterval定时器
		},
		methods: {
			saveToStore(){
				uni.setStorageSync('min', this.minVal)
				uni.setStorageSync('hour', this.hourVal)
			},
			formatToMsg(){
				var date = new Date()
				var hours = date.getHours();
				var minu = date.getMinutes();
				var hourTmp=this.hourVal;
				var minTmp=this.minVal;
				if(minu>minTmp){
					minTmp=minTmp+60-minu;
					hourTmp=hourTmp-1-hours
				}else{
					minTmp=minTmp-minu;
					hourTmp=hourTmp-hours
				}
				if(hourTmp<0){
					hourTmp+=24
				}
				if(hourTmp==0){
					this.msg=minTmp+'分';
				}else{
					this.msg=hourTmp+'小时'+minTmp+'分';
				}
			},
			change(e) {
			    console.log("e:", e);
				this.saveToStore()
				this.formatToMsg()
			},
		}
	}
</script>
<style>
	.page {
		padding: 20rpx;
	}

	.mask-switch {
		margin-bottom: 20rpx;
	}

	.desc {
		margin-top: 30rpx;
		margin-bottom: 10rpx;
		color: #ff0000;
		font-size: 12px;
		white-space: pre-line;
	}

	.button {
		margin-bottom: 20rpx;
	}

	.flex-between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}



	.uni-picker-tips {
		font-size: 12px;
		color: #666;
		margin-bottom: 15px;
		padding: 0 15px;
		/* text-align: right; */
	}
</style>